<template>
  <Form :data="model" @ok="onOk">
    <FormItem field="name" title="名称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="img" title="背景图片">
      <Input v-model="model.img" />
    </FormItem>
    <FormItem field="isFixedHeight" title="固定高度" required tip="打印纸张是否为固定高度，【发票、A4】为固定高度，热敏小票为自动高度">
      <Switch v-model="model.isFixedHeight" />
    </FormItem>
    <FormItem field="content" title="模板内容" :col="1" required>
      <Input
        type="textarea"
        v-model="model.content"
        :auto-size="{
          minRows: 2,
          maxRows: 20,
        }"
      />
    </FormItem>
    <template #op>
      <ModalButton :loading="okaying" />
    </template>
  </Form>
</template>
<script setup>
import { ModalButton, Form, FormItem, Input, Switch } from '@idmy/ui'
import { Message, useLoading } from '@idmy/core'
import { reactive } from 'vue'
import { createOrUpdate } from './services'

const props = defineProps({
  model: { type: Object, default: () => ({}) },
})

const model = reactive({
  ...props.model,
})

const [onOk, okaying] = useLoading(async () => {
  await createOrUpdate(model)
  Message.success('保存成功')
  location.reload()
})
</script>
